<script setup lang="ts">
import { onMounted, defineProps } from "vue";

// 定义接收的 props
interface VehicleDetailMosaicProps {
  data: any; // 根据实际类型可能需要更具体的类型定义
}
function customPreviewMaskFunction(color: any) {
  return `<div style="background-color: ${color}"></div>`;
}
// 使用 withDefaults 来设置默认值
const props = withDefaults(defineProps<VehicleDetailMosaicProps>(), {
  data: () => ({}), // 默认空对象，根据实际情况可以调整
});

// 在组件挂载后打印 props.data
onMounted(() => {
  // console.log("Received model data in VehicleDetailMosaic:", props.data);
});
</script>

<template>
  <div class="flex flex-col">
    <!-- <div class="relative flex h-12 bg-white decoration"></div> -->
    <div class="space-y-10 bg-white gongyi">
      <!-- <div class="flex flex-col items-center justify-center">
                <strong class="text-3xl">生产拼接图</strong>
                <small class="text-2xl text-gray-300">PRODUCT MOSAIC</small>
                <span class="relative mt-6 line"> </span>
            </div> -->
      <div class="flex flex-col gap-y-12">
        <template v-if="data.carGongYiTuList && data.carGongYiTuList.length > 0">
          <template v-for="pic in data.carGongYiTuList" :key="pic.id">
            <div class="flex flex-col text-base gap-y-6 custom-a-image">
              <a-image
                :src="pic.imageUrl"
                :previewMask="customPreviewMaskFunction('rgba(0, 255, 0, 0.7)')"
              />
            </div>
          </template>
        </template>
        <div v-else class="text-center text-gray-600" style="margin-top: 100px">
          暂无数据...
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.decoration {
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  &::before {
    width: 60%;
    height: inherit;
    background-image: url("src/assets/images/decoration_01.png");
    z-index: 1;
  }

  &::after {
    right: 0;
    width: 45%;
    height: 0.375rem;
    background-image: url("src/assets/images/decoration_02.png");
  }
}
.line {
  width: 8rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: rgba(18, 63, 255, 1);

  &::after {
    content: "";
    position: absolute;
    right: 0;
    width: 80%;
    height: inherit;
    background-color: #ff4d4f;
    border-radius: inherit;
  }
}
.gongyi {
  padding-top: 3rem;
  padding-bottom: 4rem;
  padding-left: 4rem;
  padding-right: 5rem;
}
// .custom-a-image ::v-deep .ant-image-mask-info {
//   // 将div下的所有元素隐藏文字大小为0
//   visibility: hidden;
//   font-size: 0;
//   background-color: white;
// }
// .custom-a-image ::v-deep .ant-image-mask-info span {
//   // 再单独给span标签添加样式 让其显示并且给出文字大小
//   visibility: visible;
//   // background-color: white;
//   font-size: 20px;
// }
.custom-a-image {
  cursor: pointer;
  position: relative;
}
.custom-a-image:hover::after {
  content: "查看大图";
  // position: absolute;
  // top: 0;
  // left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-a-image:hover::after:hover {
  opacity: 1;
}
</style>
